<template>
  <div style="display: inline-block">
    <el-dialog
      :visible.sync="dialog"
      :close-on-click-modal="false"
      :before-close="cancel"
      :title="title"
      append-to-body
      width="500px"
      @close="cancel"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <!-- 旧密码 -->
        <el-form-item :label="$t('user.user27')" prop="password_old">
          <el-input
            v-model="form.password_old"
            :type="LookForm.password_old ? 'text' : 'password'"
            autocomplete="new-password"
          >
            <img
              slot="suffix"
              v-show="!LookForm.password_old"
              src="~@/assets/images/login5.png"
              class="rightEye"
              @click="LookForm.password_old = true"
            />
            <img
              slot="suffix"
              v-show="LookForm.password_old"
              src="~@/assets/images/login6.png"
              class="rightEye"
              @click="LookForm.password_old = false"
            />
          </el-input>
        </el-form-item>
        <!-- 新密码 -->
        <el-form-item :label="$t('user.user28')" prop="password_new">
          <el-input
            v-model="form.password_new"
            :type="LookForm.password_new ? 'text' : 'password'"
            autocomplete="new-password"
          >
            <img
              slot="suffix"
              v-show="!LookForm.password_new"
              src="~@/assets/images/login5.png"
              class="rightEye"
              @click="LookForm.password_new = true"
            />
            <img
              slot="suffix"
              v-show="LookForm.password_new"
              src="~@/assets/images/login6.png"
              class="rightEye"
              @click="LookForm.password_new = false"
            />
          </el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item :label="$t('user.user29')" prop="password_confirm">
          <el-input
            v-model="form.password_confirm"
            :type="LookForm.password_confirm ? 'text' : 'password'"
            autocomplete="new-password"
          >
            <img
              slot="suffix"
              v-show="!LookForm.password_confirm"
              src="~@/assets/images/login5.png"
              class="rightEye"
              @click="LookForm.password_confirm = true"
            />
            <img
              slot="suffix"
              v-show="LookForm.password_confirm"
              src="~@/assets/images/login6.png"
              class="rightEye"
              @click="LookForm.password_confirm = false"
            />
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">{{
          $t("common.common1")
        }}</el-button>
        <el-button :loading="loading" type="primary" @click="doSubmit">{{
          $t("common.common2")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import store from "@/store";
import { updatePass } from "@/api/system/userCenter";
export default {
  data() {
    const password_confirm = (rule, value, callback) => {
      if (value) {
        if (this.form.password_new !== value) {
          // 两次输入密码不一致
          callback(new Error(this.$t("user.user9")));
        } else {
          callback();
        }
      } else {
        // 请再次输入密码
        callback(new Error(this.$t("user.user8")));
      }
    };
    return {
      loading: false,
      dialog: false,
      // 修改密码
      title: this.$t("user.user21"),
      LookForm: {
        password_old: false,
        password_new: false,
        password_confirm: false,
      },
      form: { password_old: "", password_new: "", password_confirm: "" },
      rules: {
        password_old: [
          // 请输入旧密码
          {
            required: true,
            message: this.$t("common.common26") + this.$t("user.user27"),
            trigger: "blur",
          },
          {
            // min: 6,
            // max: 18,
            // pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,18}$/,
            // message: "请输入6~18位字母和数字的密码",
            pattern: /^(?!(?:[0-9]+|[a-zA-Z]+|[!-\/:-@\[-`{-~]+)$)[!-~]{8,16}$/,
            message: this.$t("common.common17"),
            trigger: "blur",
          },
        ],
        password_new: [
          // 请输入新密码
          {
            required: true,
            message: this.$t("common.common26") + this.$t("user.user28"),
            trigger: "blur",
          },
          {
            pattern: /^(?!(?:[0-9]+|[a-zA-Z]+|[!-\/:-@\[-`{-~]+)$)[!-~]{8,16}$/,
            message: this.$t("common.common17"),
            trigger: "blur",
          },
        ],
        password_confirm: [
          { required: true, validator: password_confirm, trigger: "blur" },
          {
            pattern: /^(?!(?:[0-9]+|[a-zA-Z]+|[!-\/:-@\[-`{-~]+)$)[!-~]{8,16}$/,
            message: this.$t("common.common17"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    cancel() {
      this.resetForm();
      this.LookForm = {
        password_old: false,
        password_new: false,
        password_confirm: false,
      };
    },
    doSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          updatePass(this.form)
            .then((res) => {
              this.loading = false;
              if (res.code == 10000) {
                this.resetForm();
                this.$notify({
                  // 密码修改成功，请重新登录
                  title: this.$t("user.user30"),
                  type: "success",
                  duration: 1500,
                });
                setTimeout(() => {
                  store.dispatch("LogOut").then(() => {
                    location.reload(); // 为了重新实例化vue-router对象 避免bug
                  });
                }, 2000);
              } else {
                this.$notify({
                  title: res.message,
                  type: "error",
                  duration: 1500,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              console.log(err.response.data.message);
            });
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.dialog = false;
      this.$refs["form"].resetFields();
      this.form = { password_old: "", password_new: "", password_confirm: "" };
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input__prefix,
.el-input__suffix-inner {
  img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
  .rightEye {
    cursor: pointer;
    user-select: none;
  }
}
</style>
